<template>
  <div class="app-container">
    <!-- 菜单栏 -->
    <el-row>
      <el-col :span="24">
        <div class="filter-container">
          <el-select class="filter-item" style="width: 160px" size="mini" v-model="form.searchUser">
            <el-option v-for="item in pageData.searchUserList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
          <el-date-picker class="filter-item" size="mini" v-model="form.searchDate" type="daterange" :unlink-panels="pageData.unlinkPanels"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pageData.pickerOptions" @change="handlePageInit">
          </el-date-picker>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="handlePageInit">查询</el-button>
        </div>
      </el-col>
      <!-- 全部问答 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">全部问答 含问大家、问专家、问个人、悬赏</span>
            </div>
          </el-col>
          <el-col :span="8"><charts-component v-bind:option="responseData.chartOptionAllQuestion" v-bind:id="1" :style="{width: '800px', height: '200px'}"/></el-col>
          <el-col :span="16">
            <el-card class="box-card" style="margin-top: 5px">
              <div style="text-align: left">
                <el-row>
                  <el-col :span="24">问、答总量：<el-tag>{{responseData.chartOptionAllQuestionInfo.questionCount + responseData.chartOptionAllQuestionInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">总提问数量：<el-tag type="success">{{responseData.chartOptionAllQuestionInfo.questionCount}}</el-tag></el-col>
                  <el-col :span="24">总回答数量：<el-tag type="warning">{{responseData.chartOptionAllQuestionInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24"  v-if="pageData.searchUserStatus">其中无回答提问数量：<el-tag type="info">{{responseData.chartOptionAllQuestionInfo.questionNotAnswerCount}}</el-tag></el-col>
                  <el-col :span="24">其中被评为最佳答案总数量：<el-tag type="danger">{{responseData.chartOptionAllQuestionInfo.answerRewardCount}}</el-tag></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 问大家/问专家 -->
      <el-col :span="24" v-if="pageData.searchUserStatus">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">问大家</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">问专家</span>
            </div>
          </el-col>
          <el-col :span="8"><charts-component v-bind:option="responseData.chartOptionQuestionPool" v-bind:id="2" :style="{width: '800px', height: '200px'}"/></el-col>
          <el-col :span="4">
            <el-card class="box-card" style="margin-top: 5px">
              <div style="text-align: left">
                <el-row>
                  <el-col :span="24">问、答总量：<el-tag>{{responseData.chartOptionQuestionPoolInfo.questionCount + responseData.chartOptionQuestionPoolInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">提问数量：<el-tag type="success">{{responseData.chartOptionQuestionPoolInfo.questionCount}}</el-tag></el-col>
                  <el-col :span="24">回答数量：<el-tag type="warning">{{responseData.chartOptionQuestionPoolInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">无回答提问：<el-tag type="info">{{responseData.chartOptionQuestionPoolInfo.questionNotAnswerCount}}</el-tag></el-col>
                  <el-col :span="24">最佳答案：<el-tag type="danger">{{responseData.chartOptionQuestionPoolInfo.answerRewardCount}}</el-tag></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8"><charts-component v-bind:option="responseData.chartOptionQuestionExpert" v-bind:id="3" :style="{width: '800px', height: '200px'}"/></el-col>
          <el-col :span="4">
            <el-card class="box-card" style="margin-top: 5px">
              <div style="text-align: left">
                <el-row>
                  <el-col :span="24">问、答总量：<el-tag>{{responseData.chartOptionQuestionExpertInfo.questionCount + responseData.chartOptionQuestionExpertInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">向专家提问：<el-tag type="success">{{responseData.chartOptionQuestionExpertInfo.questionCount}}</el-tag></el-col>
                  <el-col :span="24">专家未回答：<el-tag type="info">{{responseData.chartOptionQuestionExpertInfo.questionNotAnswerCount}}</el-tag></el-col>
                  <el-col :span="24">无回答转个人：<el-tag type="info">{{responseData.chartOptionQuestionExpertInfo.expertQuestionExpiredCount}}</el-tag></el-col>
                  <el-col :span="24">专家回答：<el-tag type="warning">{{responseData.chartOptionQuestionExpertInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">问专家支付采币：<el-tag type="warning">{{responseData.chartOptionQuestionExpertInfo.expertQuestionPrice}}采币</el-tag></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 问个人/悬赏问答 -->
      <el-col :span="24" v-if="pageData.searchUserStatus">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">问个人</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">悬赏问答</span>
            </div>
          </el-col>
          <el-col :span="8"><charts-component v-bind:option="responseData.chartOptionQuestionPerson" v-bind:id="4" :style="{width: '800px', height: '200px'}"/></el-col>
          <el-col :span="4">
            <el-card class="box-card" style="margin-top: 5px">
              <div style="text-align: left">
                <el-row>
                  <el-col :span="24">问、答总量：<el-tag>{{responseData.chartOptionQuestionPersonInfo.questionCount + responseData.chartOptionQuestionPersonInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">提问数量：<el-tag type="success">{{responseData.chartOptionQuestionPersonInfo.questionCount}}</el-tag></el-col>
                  <el-col :span="24">回答数量：<el-tag type="warning">{{responseData.chartOptionQuestionPersonInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">无回答提问：<el-tag type="info">{{responseData.chartOptionQuestionPersonInfo.questionNotAnswerCount}}</el-tag></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8"><charts-component v-bind:option="responseData.chartOptionQuestionReward" v-bind:id="5" :style="{width: '800px', height: '200px'}"/></el-col>
          <el-col :span="4">
            <el-card class="box-card" style="margin-top: 5px">
              <div style="text-align: left">
                <el-row>
                  <el-col :span="24">问、答总量：<el-tag>{{responseData.chartOptionQuestionRewardInfo.questionCount + responseData.chartOptionQuestionRewardInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">提问数量：<el-tag type="success">{{responseData.chartOptionQuestionRewardInfo.questionCount}}</el-tag></el-col>
                  <el-col :span="24">回答数量：<el-tag type="warning">{{responseData.chartOptionQuestionRewardInfo.answerCount}}</el-tag></el-col>
                  <el-col :span="24">悬赏支付采币：<el-tag type="warning">{{responseData.chartOptionQuestionRewardInfo.rewardQuestionPrize}}采币</el-tag></el-col>
                  <el-col :span="24">无回答提问：<el-tag type="info">{{responseData.chartOptionQuestionRewardInfo.questionNotAnswerCount}}</el-tag></el-col>
                  <el-col :span="24">最佳答案：<el-tag type="danger">{{responseData.chartOptionQuestionRewardInfo.answerRewardCount}}</el-tag></el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 趋势分析 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="text-align: left; background-color: #409EFF;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
        -moz-box-shadow: 2px 2px 10px #909090;
        -webkit-box-shadow: 2px 2px 10px #909090;
        box-shadow:2px 2px 10px #909090;">
              <span style="margin-left: 20px; line-height: 36px; color: white">趋势分析</span>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 20px; text-align: left; margin-left: 50px">
            <el-radio-group v-model="form.searchUser" @change="handlePageInit">
              <el-radio label="">全部</el-radio>
              <el-radio label="1">问大家</el-radio>
              <el-radio label="2">问专家</el-radio>
              <el-radio label="3">悬赏</el-radio>
              <el-radio label="4">问个人</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="2"><charts-component v-bind:option="responseData.chartLineOption" v-bind:id="6" :style="{width: '800px', height: '200px'}"/></el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // 组件引入
  import chartsComponent from "@/components/Echarts/index";
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission,getUserId } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsQuestionStatisticsUserList,loadCmsQuestionStatisticsList,loadCmsQuestionStatisticsLineList } from "@/api/question";
  export default {
    name: "statisticsPool",
    //import引入的组件需要注入到对象中才能使用
    components: {chartsComponent},
    data() {
      return {
        pageData:{
          searchUserStatus: false,
          searchUserList: [],
          unlinkPanels: true,
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
        },// 页面配置数据
        form:{
          searchUser: "",
          searchDate: "",
          searchQuestionType: "",
          startDate: "",
          endDate: "",
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {
          // 图表配置全部问答
          chartOptionAllQuestion: {},
          chartOptionAllQuestionInfo: {},
          // 图表配置问大家
          chartOptionQuestionPool: {},
          chartOptionQuestionPoolInfo: {},
          // 图表配置问专家
          chartOptionQuestionExpert: {},
          chartOptionQuestionExpertInfo: {},
          // 图表配置问个人
          chartOptionQuestionPerson: {},
          chartOptionQuestionPersonInfo: {},
          // 图表配置悬赏问答
          chartOptionQuestionReward: {},
          chartOptionQuestionRewardInfo: {},
          // 图表配置折线图
          chartLineOption: {},
        },// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){
        this.pageData.searchUserStatus = this.form.searchUser === "";
        // 根据筛选条件读取数据
        let startData = "";
        let endData = "";
        if (this.form.searchDate !== null && this.form.searchDate !== ""){
          startData = new Date(this.form.searchDate[0]);
          startData = startData.getFullYear()+"-"+("0"+(startData.getMonth()+1)).slice(-2)+"-"+(startData.getDate().toString().length == 1 ? ("0"+startData.getDate()) : startData.getDate());
          endData = new Date(this.form.searchDate[1]);
          endData = endData.getFullYear()+"-"+("0"+(endData.getMonth()+1)).slice(-2)+"-"+(endData.getDate().toString().length == 1 ? ("0"+endData.getDate()) : endData.getDate());
          this.form.startDate = startData + " 00:00:00";
          this.form.endDate = endData + " 23:59:59";
        }
        // 封装请求参数
        this.loadCmsQuestionStatisticsList(1);
        this.loadCmsQuestionStatisticsList(2);
        this.loadCmsQuestionStatisticsList(3);
        this.loadCmsQuestionStatisticsList(4);
        this.loadCmsQuestionStatisticsList(5);
        this.loadCmsQuestionStatisticsLineList(6);
      },// 页面初始化
      // 接口
      loadCmsQuestionStatisticsUserList(){
        loadCmsQuestionStatisticsUserList().then(response => {
          if (response.code === "200"){
            this.pageData.searchUserList = response.data;
            this.pageData.searchUserList.unshift({label: "全部", value: ""});
            this.pageData.searchUserStatus = true;
            this.form.searchUser = "";
          } else {
            this.$message.warning(response.message);
          }
        }).catch( error =>{
          console.log(error);
          this.$message.error(error);
        })
      },// 获取可查询用户列表
      // 获取饼图图表数据
      loadCmsQuestionStatisticsList(type){
        let param = {
          startDate: this.form.startDate,
          endDate: this.form.endDate,
          queryType: type
        };
        // 公用的饼图图表配置
        let chartOption = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            top: 10,
            data: []
          },
          series: [
            {
              // name: '访问来源',
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['10%', '50%'],
              label: {
                formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 14,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              data: []
            }
          ],
          id: 0
        };
        // 调用接口读取数据
        loadCmsQuestionStatisticsList(param).then(response => {
          if (response.code === '200'){
            // 大图表配置
            chartOption.series[0].data = response.data.seriesData;
            chartOption.id = response.data.id;
            chartOption.isFinal = true;
            if (chartOption.id === '1'){
              // 全部问答图表
              this.responseData.chartOptionAllQuestion = chartOption;
              this.responseData.chartOptionAllQuestionInfo = response.data.questionStatisticsInfoData;
            } else if (chartOption.id === '2'){
              // 问大家图表
              this.responseData.chartOptionQuestionPool = chartOption;
              this.responseData.chartOptionQuestionPoolInfo = response.data.questionStatisticsInfoData;
            } else if (chartOption.id === '3'){
              // 问专家图表
              this.responseData.chartOptionQuestionExpert = chartOption;
              this.responseData.chartOptionQuestionExpertInfo = response.data.questionStatisticsInfoData;
            } else if (chartOption.id === '4'){
              // 问个人图表
              this.responseData.chartOptionQuestionPerson = chartOption;
              this.responseData.chartOptionQuestionPersonInfo = response.data.questionStatisticsInfoData;
            } else if (chartOption.id === '5'){
              // 悬赏问答图表
              this.responseData.chartOptionQuestionReward = chartOption;
              this.responseData.chartOptionQuestionRewardInfo = response.data.questionStatisticsInfoData;
            }
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error =>{
          console.log(error);
        });
      },
      // 获取折线图图表数据
      loadCmsQuestionStatisticsLineList(type){
        let param = {
          startDate: this.form.startDate,
          endDate: this.form.endDate,
          queryType: type,
          questionType: this.form.searchQuestionType
        };
        loadCmsQuestionStatisticsLineList(param).then(response => {
          if (response.code === '200'){
            // 折线图图表配置
            let chartOptionAllQuestion = {
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                orient: 'vertical',
                left : 0,
                top: 50,
                data: []
              },
              grid: {
                left: '30%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value'
              },
              series: [],
              id: 6
            };
            let series = response.data.seriesData;
            for (let i=0; i<series.length; i++){
              series[i].type = 'line';
            }
            chartOptionAllQuestion.series = series;
            chartOptionAllQuestion.legend.data = response.data.chartLegend;
            chartOptionAllQuestion.xAxis.data = response.data.chartXAXis;
            chartOptionAllQuestion.id = response.data.id;
            chartOptionAllQuestion.isFinal = true;
            // 图表赋值
            this.responseData.chartLineOption = chartOptionAllQuestion;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(error =>{
          console.log(error);
        });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      // 判断用户是否有删除权限
      if (PermissionsToDetectFormUser(getPermission(), "690002")){
        // 拥有查询全部用户的权限
        this.loadCmsQuestionStatisticsUserList();
      } else {
        this.pageData.searchUserList = [{label: '当前用户', value: getUserId()}];
        this.form.searchUser = getUserId();
        this.pageData.searchUserStatus = false;
      }
      // 进行初始化数据读取(不能使用延时调用，表格数据会不刷新)
      this.handlePageInit();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
